<template>
  <div class="hello">
    1. 测试差值：<br><br>
    {{msg}} {{count}}
    <hr>

    2. 测试room <br><br>
    <p>{{room}}</p> <br>
    <p v-html="room"></p> <br>
    <hr>

    3. 测试特性  v-bind <br>
    <a v-bind:href="links.url">{{links.title}}</a> <br>
    自定义的属性，也可以用v-bind: <br>
    <p v-bind:data-id="dataId">测试自定义属性段落</p>
    <hr>

    <p>4. 可以写js表达式</p>
    <p>{{ count + 1 }}</p>
    <p>{{ count > 1 ? 'YES' : 'NO' }}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
    <p><div v-bind:id="'list-' + dataId">hello div</div></p>
    <hr>

    <p>5. 条件渲染</p>
    <p v-if="flag">孙悟空</p>
    <p v-else>六耳猕猴</p>

    <p>分组渲染：</p>
    <div>
      <template v-if="flag">
        <p>孙悟空</p>
        <p>唐僧</p>
        <p>猪八戒</p>
        <p>沙悟净</p>
      </template>

      <template v-else>
        <p>六耳猕猴1</p>
        <p>六耳猕猴2</p>
        <p>六耳猕猴3</p>
        <p>六耳猕猴4</p>
      </template>
    </div>

    <p>测试 v-show：</p>
    <p v-show="flag">测试 v-show 用的语句</p>

    <p>注意：v-show 和 v-if 的区别： v-if控制标签是否存在；  v-show只相当于 display:show，标签肯定是会加载的，只是控制是否显示</p>

    <hr>

    <p>6. 列表渲染：</p>
    <div>
      <ul>
        <li v-for="(item, index) in names" v-bind:key="index">{{item}}</li>
      </ul>
    </div>
    <div>
      <ul>
        <li v-for="(value, name, index) in obj" v-bind:key="index">{{name}}：{{value}} - {{index}}</li>
      </ul>
    </div>
    <hr>

    <h3>7. 事件处理</h3>
    <p>{{count}}</p>
    <button v-on:click="count++">按钮1 用于测试点击事件</button>
    <button v-on:click="addCountHandler">按钮2 用于测试点击事件</button>
    <button v-on:mouseover="count--">按钮3 用于测试mouseover</button>
    <button v-on:click="addCountHandler2(5)">按钮5 用于测试能传递参数的按钮</button>
    <button v-on:click="addCountHandler2(5, $event)">按钮6 传入事件</button>
    <br>
    <p>事件传参：点谁打印谁</p>
    <div>
      <ul>
        <li v-on:click="getName(item)" v-for="(item, index) in names" v-bind:key="index">{{item}}</li>
      </ul>
    </div>

    <p>事件修饰符：（详见文档 事件梳理）</p>
    <div>
      <form>
        <button v-on:click.prevent="sendClick">发送按钮</button>
      </form>
    </div>





  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: "hello world",
      count: 0,
      dataId: 123,
      room: "<h3>我是一个room标签</h3>",
      flag: false,
      links: {
        title: "百度",
        url: "http://www.baidu.com"
      },
      names: ["林青霞", "张曼玉", "刘岩", "刘诗诗"],
      obj: {
        name: "张三",
        age: 18,
        sex: "男"
      }
    }
  },
  //函数
  methods: {
    addCountHandler() {
      this.count++;
    },
    addCountHandler2(num, event) {
      console.log(event);
      this.count += num;
    },
    getName(itemName) {
      console.log(itemName);
    },
    //发送按钮
    sendClick() {
      console.log("发送");
    }
  }
}
</script>

